<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2015/10/10 0010
  Time: 17:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib  uri="http://java.sun.com/jstl/core" prefix="c" %>
<%@include file="../base/header.jsp"%>
<html>
<head>
  <title>上传封面</title>
  <script src="/jquery/jquery.Jcrop.js" type="text/javascript"></script>
  <link rel="stylesheet" href="/css/jquery.Jcrop.css" type="text/css" />
  <style type="text/css">
    #preview-pane{
      display: block;
      position: absolute;
      z-index: 2000;
      right: -150px;
      padding: 0px;
      border: 1px rgba(0,0,0,.4) solid;
      background-color: white;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;
      -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
      box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
    }
    .jcrop-preview {
      width: 100px;
      height: 120px;
      margin-left: 0px;
      margin-top: 0px;
      max-width: none;
    }
    .preview-container {
      width: 100px;
      height: 120px;
      overflow: hidden;
    }
  </style>
</head>
<body>
<div style="width: 700px; margin-top: 100px; margin-right: auto; margin-left: auto">
  <form id="ulform" action="book/upload_img.htm" enctype="multipart/form-data" method="post">
    <input type="file" name="icon" id="file" value="选择图片" />
    <br>
    <button class="btn btn-success" type="submit">点击上传</button>
  </form>
  <div id="preview-pane">
    <div class="preview-container">
      <img src="${imgUrl}" class="jcrop-preview" alt="Preview" />
    </div>
  </div>
  <img src="${imgUrl}" id="target" alt="" />
  <form action="book/crop_img.htm" method="post">
    <input id="imgUrl" name="imgUrl" style="display: block" value="${imgUrl}">
    <input id="width" name="width" style="display: block">
    <input id="height" name="height" style="display: block">
    <input id="x" name="x" style="display: block">
    <input id="y" name="y" style="display:block">
    <br>
    <button class="btn btn-success" type="submit">确定</button>
  </form>
</div>
</body>
<script>
  jQuery(function($){
    var x;
    var y;
    var width;
    var height;
    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
            boundx,
            boundy,

    // Grab some information about the preview pane
            $preview = $('#preview-pane'),
            $pcnt = $('#preview-pane .preview-container'),
            $pimg = $('#preview-pane .preview-container img'),

            xsize = $pcnt.width(),
            ysize = $pcnt.height();

    console.log('init',[xsize,ysize]);
    $('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: xsize / ysize
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;

      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });

    function updatePreview(c)
    {
      if (parseInt(c.w) > 0)
      {
        var rx = xsize / c.w;
        var ry = ysize / c.h;

        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
        $('#width').val(c.w);  //c.w 裁剪区域的宽
        $('#height').val(c.h); //c.h 裁剪区域的高
        $('#x').val(c.x);  //c.x 裁剪区域左上角顶点相对于图片左上角顶点的x坐标
        $('#y').val(c.y);  //c.y 裁剪区域顶点的y坐标</span>
      }
    };
  });
</script>
</html>
